import Taro from '@tarojs/taro';
import { AtTabBar } from 'taro-ui';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { asyncRequestFooterBar, updateSelectedIndex } from '@/actions/footerBar';

/* 引入taro-ui样式 */
import "taro-ui/dist/style/components/tab-bar.scss";
import "taro-ui/dist/style/components/badge.scss";
import "taro-ui/dist/style/components/icon.scss";
import "./index.scss";

function FooterBarComponent({footerBarIndex}) {
  const dispatch = useDispatch();
  const footerBarMenuList = useSelector((state: any) => state.footerBar.footerBarMenuList)
  const currentSelectedIndex = useSelector((state: any) => state.footerBar.currentSelectedIndex)
  const handleClick = (index) => {
    if (footerBarMenuList[index]) {
      dispatch(updateSelectedIndex(index));
      Taro.reLaunch({
        url: footerBarMenuList[index].menuUrl
      })
    }
  }
  useEffect(() => {
    dispatch(asyncRequestFooterBar(footerBarIndex));
  }, [])

  return (
    <AtTabBar
      className="footer-bar-box"
      fixed
      tabList={footerBarMenuList}
      onClick={handleClick}
      current={currentSelectedIndex}
      iconSize={20}
      fontSize={14}
      selectedColor="#ff7a59"
    />
  )
}

export default FooterBarComponent;